<template>
  <div class="app-container">
    <el-form inline>
      <el-form-item :label="$t('Month')">
        <el-date-picker type="month" v-model="queryParams.date" value-format="yyyy-MM" @change="queryData" />
      </el-form-item>
    </el-form>
    <div ref="chart" style="width: 90vw;height: 45vh;"></div>
  </div>
</template>
<script>
  /**
  6.实时统计和显示各教室的用电量，按月或按日统计单教室或全校设备用电量并以柱状图的形式显示数值；
 */
  import {
    DoubleGroupChart
  } from '@/views/components/chart'
  import {
    FreeCalendarChart
  } from './components/CalendarChart';

  export default {
    name: 'TodayEnergyBarChart',
    mixins: [DoubleGroupChart, FreeCalendarChart],
    data() {
      const vm = this
      return {
        chartOption: {
          title: {
            text: vm.$t('chart.EnergyAnalysis'),
            left: 'center'
          },
          tooltip: {
            show: true
          },
          xAxis: [{
            type: 'category'
          }],
          yAxis: [{
            type: 'value',
            show: true
          }]
        },
        queryParams: {
          groupDept: true,
          groupType: true,
          groupDate: 3,
        },
        valueKeys: ['energy'],
        groupKeys: ['date', 'department'],
      }
    },
    methods: {}
  }

</script>
